<template>
    <div>
        <!-- <h1>公用房申请管理</h1> -->
         <!-- 面包屑导航 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/management' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>公用房</el-breadcrumb-item>
            <el-breadcrumb-item>公用房申请管理</el-breadcrumb-item>
        </el-breadcrumb>
        
        <!-- 查询模块 -->
        <el-card>
            <el-form :model="applicationSearchForm" label-width="100px">
                <el-row :gutter="5">
                    <el-col :span="6">
                        <el-form-item label="校区">
                            <el-input v-model="applicationSearchForm.campusName" placeholder="请输入校区"></el-input>
                                <!-- <el-option label="北区" value="北区"></el-option> -->
                            <!-- </el-select> -->
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="楼栋">
                            <el-input v-model="applicationSearchForm.buildName" placeholder="请输入楼栋"></el-input>
                                <!-- <el-option label="北区" value="北区"></el-option>
                            </el-select> -->
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="楼层">
                            <el-input v-model="applicationSearchForm.floorNum" placeholder="请输入楼层"></el-input>
                        </el-form-item>
                    </el-col>
                    
                    <el-col :span="6">
                        <el-form-item label="申请单位">
                            <el-input v-model="applicationSearchForm.departmentName" placeholder="请输入申请单位"></el-input>
                        </el-form-item>
                    </el-col>
                    
                    <el-col :span="6">
                        <el-form-item label="处理状态">
                            <el-select v-model="applicationSearchForm.publicHouseState1" placeholder="请选择处理状态">
                                <el-option label="已处理" value="是"></el-option>
                                <el-option label="未处理" value="否"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label=申请人>
                            <el-input v-model="applicationSearchForm.username" placeholder="请输入申请人"></el-input>
                        </el-form-item>
                    </el-col>
                    <!-- 按钮 -->
                    <el-col :span="4" :offset="1">
                        <el-button type="primary" @click="searchApplication">查询</el-button>
                        <el-button type="info">重置</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
        
        <!-- 功能模块 -->
        <div class="features">
            <div class="btn">
                <el-button @click="roomsExport" icon="el-icon-upload2" size="medium" plain>导出</el-button>
                <el-button @click="roomsDelete" icon="el-icon-delete" size="medium" plain>删除</el-button>
                <el-button type="danger" size="mini">有{{this.maturityNumber}}个申请即将到期<i class="el-icon-search el-icon--right"></i></el-button>
                <el-tag type="info">总数: {{this.queryInfo.total}} 条</el-tag>
            </div>
        </div>
        
        <!--数据展示 -->
        <el-card>
            <el-table :data="applictionList" stripe :header-cell-style="{backgroundColor:'#f3f3f5'}">
                <el-table-column type="index"></el-table-column>
                <el-table-column prop="publicHouseName" label="名称" width="100px"></el-table-column>
                <el-table-column prop="username" label="申请人" width="100px"></el-table-column>
                <el-table-column prop="id" label="工号" width="150px"></el-table-column>
                <el-table-column prop="departmentName" label="单位" width="100px"></el-table-column>
                <el-table-column prop="public_house_start_time" label="开始使用时间" width="150px"></el-table-column>
                <el-table-column prop="public_house_apply_time" label="申请时间" width="150px"></el-table-column>
                <el-table-column prop="applyPublicHouseReason" label="申请原因" width="100px"></el-table-column>
                <el-table-column prop="publicHouseState" label="空闲状态" width="100px">
                     <template slot-scope="scope">
                        <el-tag v-if="scope.row.publicHouseState ==='是'">是</el-tag>
                        <el-tag type="warning" v-else>否</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="publicHouseState1" label="处理状态" width="100px">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.publicHouseState1 ==='是'">是</el-tag>
                        <el-tag type="warning" v-else>否</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="250px" fixed="right">
                    <template slot-scope="scope">
                        
                        <!-- 同意按钮 -->
                        <el-button size="mini" type="success" icon="el-icon-check"></el-button>
                        <!-- 拒绝按钮 -->
                        <el-tooltip effect="dark" content="拒绝" placement="top" :enterable="false">
                            <el-button size="mini" type="warning" icon="el-icon-close"></el-button>
                        </el-tooltip>
                        <!-- 详情按钮 -->
                        <el-tooltip effect="dark" content="详情" placement="top" :enterable="false">
                            <el-button type="primary" icon="el-icon-search" size="mini"></el-button>
                        </el-tooltip>
                        <!-- 删除按钮 -->
                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteApplication(scope.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            
            <!-- 分页功能 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.page"
                :page-sizes="[10,15]"
                :page-size="queryInfo.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="queryInfo.total" background>
            </el-pagination>
        </el-card>
        
    </div>
</template>
<script>
export default {
    data() {
        return {
            applictionList:[],
            queryInfo:{
                total:0,
                page:1,
                size:5
            },
            // total:123,
            // 即将到期的用房申请
            maturityNumber:0,
            
            // 模糊查询
            applicationSearchForm:{
                username:'',
                publicHouseState1:'',
                departmentName:'',
                floorNum:'',
                buildName:'',
                campusName:''
            }
        }
    },
    created(){
        this.getApplicationsList()  
    },
    methods:{
        
        async getApplicationsList(){
            await this.$http.get(`applyPublicHouseView/p/${this.queryInfo.page}/${this.queryInfo.size}`).then(res=>{
                // console.log(res);
                if(res.data.code !==1){
                    return this.$message.error('信息获取失败！');
                }
                this.queryInfo.total = res.data.data.total; 
                this.applictionList = res.data.data.list;
                // this.$message.success('信息获取成功！');
            });
        },
        
        // 模糊查询
        async searchApplication(){
            const res = await this.$http.get('applyPublicHouseView/fuzzyQueryP',this.applicationSearchForm)
            console.log(res+'application模糊查询');
        },
        
        
        // 每页展示变化
        handleSizeChange(newSize){
            this.queryInfo.size = newSize;
            this.getRoomsList();
        },        
        // 页码变化
        handleCurrentChange(newPage){
            this.queryInfo.page = newPage;
            this.getRoomsList();
        },
        
        // 删除申请信息
        async deleteApplication(row){
            const res = await this.$http.delete(`/applyPublicHouseView/${row.publicHouseApplyId}`);
            // console.log(res);
        },
        
        
        
        //  按钮操作  导入 导出 删除 筛查
        roomsImport(){},
        roomsExport(){},
        roomsDelete(){},
        roomsScreen(){},
    }
}
</script>
<style scoped>
    
</style>
